<template>
	<view class="page_content">
		<view class="page-bgc">
		</view>
		<view class="head_content">
			<!-- 顶部账户详情 -->
			<view class="tops">
				<view class="tops-left" @click="goDetails">
					<view class="my-gold">
						我的{{ signinConfig.currencyName }} >
					</view>
					<view class="nums">
						{{ userinfo.nums || 0 }}
					</view>
					<view class="scale">
						{{ userinfo.exchange }}
					</view>
				</view>
				<view class="tops-right" @click="open">
					去兑换
				</view>
			</view>
			<!-- 签到赚金币 -->
			<view class="sign">
				<view class="sign-top">
					<image :src="signinConfig.signInIcon" mode="aspectFill"></image>
					<view class="sign-title">
						{{ signinConfig.signInName }}
					</view>
				</view>
				<view class="sign-txt">
					<text>连续签到{{datas.length}}天</text>
					<text style="color: #FF0066;">必得{{sumcurrencyQuantity}}金币</text>
				</view>
				<view class="sign-btnbox">
					<view class="sign-box" v-for="(item,index) in datas" :key="index">
						<!-- <image v-if="item.imgStatus == 0" src="../../../static/red-packet-line (1).svg" mode=""></image> -->
						<!-- <image v-if="item.imgStatus == 1" src="../../../static/red-packet-fill.svg" mode=""></image> -->
						<image :src="item.icon" mode=""></image>
						<view class="sign-nums" v-if="item.receive == '已领'" style="">
							{{ item.currencyQuantity }}
						</view>
						<view class="sign-nums" v-if="item.receive!='已领'" style="color: #fff;">
							{{ item.currencyQuantity }}
						</view>
						<view class="sign-name">
							{{ item.receive }}
						</view>
						<!-- 						<view v-else class="sign-name">
							{{ item.names }}
						</view> -->
					</view>
				</view>
				<view class="sign-bt">
					<view class="sign-bt-left" v-if="receiveStatus==2">
						签到可领今日奖励{{ currencyQuantity }}金币
					</view>
					<view class="sign-bt-left" v-else-if="receiveStatus==1">
						今日已签到，请明日再来
					</view>
					<view class="ants" v-if="receiveStatus==2" @click="signin">
						签到
					</view>
					<view class="ants" v-else-if="receiveStatus==1" style="opacity: 0.5;">
						已签到
					</view>
				</view>
			</view>
			<!-- 做任务领金币 -->
			<view class="quest">
				<view class="quest-top">
					<image :src="signinConfig.taskIcon" mode="aspectFill"></image>
					<view class="quest-title">
						{{ signinConfig.taskName }}
					</view>
				</view>
				<view class="quest-list">
					<view class="quest-boxs" v-for="(item,index) in questList" :key="index">
						<view class="quest-list-box">
							<view class="quest-left">
								<view class="quest-left-title">
									<view class="quest-names">
										{{ item.taskName }}
									</view>
									<image src="../../../static/copper-coin-line (1).svg" mode="aspectFill"></image>
									<view class="quest-num">
										{{ item.currencyQuantity}}
									</view>
								</view>
								<view class="quest-left-info">
									{{ item.remarks }}（{{ item.ledFrequency }}/{{ item.taskCeiling }}）
								</view>
							</view>
							<view class="quest-right">
								<view v-if="item.ledFrequency<item.taskCeiling|| item.ledFrequency!=item.taskCeiling">
									<button open-type="share"
										v-if="item.taskKey=='fw' && (item.ledFrequency<item.taskCeiling && item.ledFrequency!=item.taskCeiling)"
										id="abc" :data-id="item.id" :data-key="item.taskKey"
										:data-price="item.currencyQuantity" class="ants">去转发
									</button>
									<view
										v-if="item.taskKey=='ad' && (item.ledFrequency<item.taskCeiling && item.ledFrequency!=item.taskCeiling)"
										class="ants" @click="handleToTask(item.id,item.taskKey)">
										看广告
									</view>
									<view
										v-if="item.taskKey=='like' && (item.ledFrequency<item.taskCeiling && item.ledFrequency!=item.taskCeiling)"
										class="ants" @click="handleToTask(item.id,item.taskKey)">
										去点赞
									</view>
									<view
										v-if="item.taskKey=='bw' && (item.ledFrequency<item.taskCeiling && item.ledFrequency!=item.taskCeiling)"
										class="ants" @click="handleToTask(item.id,item.taskKey)">
										去追剧
									</view>
									<view
										v-if="item.taskKey=='stm' && (item.ledFrequency<item.taskCeiling && item.ledFrequency!=item.taskCeiling)"
										class="ants" @click="handleToTask(item.id,item.taskKey)">
										去转发
									</view>
									<view
										v-if="item.taskKey=='sy' && (item.ledFrequency<item.taskCeiling && item.ledFrequency!=item.taskCeiling)"
										class="ants" @click="handleToTask(item.id,item.taskKey)">
										做任务
									</view>
								</view>
								<view v-if="item.ledFrequency>item.taskCeiling || item.ledFrequency==item.taskCeiling"
									class="ants" style="opacity: 0.5;">
									已完成
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btnbox" style="width: 100%;height: 100rpx;">

		</view>
		<view>
			<uv-popup ref="popup" mode="bottom" custom-style="min-height: 800rpx;" round="18">
				<view class="popup-box">
					<view class="popup-title">
						金币兑换
					</view>
					<uv-form labelPosition="top" :model="amountData" :rules="rules" ref="form" labelWidth="88">
						<uv-form-item label="兑换数量" prop="currencyQuantity" borderBottom>
							<uv-input v-model="amountData.currencyQuantity" border="none" :placeholder="placeholder">
							</uv-input>
						</uv-form-item>
					</uv-form>
					<button type="default" class="top_btn" @click="submit">确认提现</button>
				</view>
			</uv-popup>
		</view>
		<TabBar :tabIndex="2"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../../components/tabbar/tabbar.vue';
	import apiMoen from '../../../utils/config.js';
	let videoAd = null
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				tabIndex: 0,
				userinfo: {
					nums: 0,
					exchange: '',
					exchangeRatio: 0,
				},
				amountData: {
					currencyQuantity: 0,
					memberId: uni.getStorageSync('id'),
					sysOrgCode: uni.getStorageSync('sysOrgCode')
				},
				rules: {},
				price: 0,
				receiveStatus: 2,
				placeholder: '',
				currencyQuantity: '',
				sumcurrencyQuantity: '',
				signinId: '',
				datas: [],
				nums: 0,
				questList: [
					// {
					// 	key: 'ad',
					// 	names: '看广告领取海量金币',
					// 	titles: '最高赚2000金币/日，已领取',
					// 	num: 588,
					// 	mx: 0,
					// 	ma: 10,
					// 	status: 1,
					// }
				],
				signinConfig: {
					currencyName: '',
					signInName: '',
					taskName: '',
					taskIcon: '',
					signInIcon: ''
				}
			}
		},
		onLoad() {
			// this.getMyGoldCoins()
			// this.getSigninList()
			// this.getsigninWelfareConfig()
			// this.getSigninTaskList()
			this.advertisement()
		},
		onShow() {
			this.getMyGoldCoins()
			this.getSigninList()
			this.getsigninWelfareConfig()
			this.getSigninTaskList()
		},
		onShareAppMessage(res) {
			if (res.target.id === 'abc') { // 来自页面内分享按钮
				const id = res.target.dataset.id
				const key = res.target.dataset.key
				const price = res.target.dataset.price
				this.signinTaskSuccess(id, key)
			}
			return {
				title: '签到领福利免费看剧',
				path: '/pages/test/test?id=123',
			}
		},
		onReady() {
			this.rules.currencyQuantity = [{
				type: 'number',
				required: true,
				message: '请填写兑换数量',
				trigger: ['blur', 'change']
			}]
			this.$refs.form.setRules(this.rules)
		},
		mounted() {
			// this.getMyGoldCoins()
			// this.getSigninList()
			// this.getsigninWelfareConfig()
			// this.getSigninTaskList()
		},
		computed: {
			exchangePrice() {
				const price = Math.floor(this.userinfo.nums / this.userinfo.exchangeRatio)
				this.placeholder = '最少输入1最多输入' + price
				return price
			}
		},

		methods: {
			open() {
				this.$refs.popup.open();
			},
			submit() {
				this.$refs.form.validate().then(res => {
					const obj = this.amountData
					this.$request('signin.signinBalanceExchange', {
						...obj
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'none',
								title: '兑换成功！'
							});
							this.$refs.popup.close();
							this.getMyGoldCoins()
							this.amountData.currencyQuantity = 0
						}
					})

				}).catch(errors => {
					uni.showToast({
						icon: 'error',
						title: '输入错误！'
					});
				});
			},
			//签到福利配置
			getsigninWelfareConfig() {
				this.$request('signin.signinWelfareConfig', {
					sysOrgCode: uni.getStorageSync('sysOrgCode'),
				}).then(res => {
					if (res.code == 200) {
						this.signinConfig.currencyName = res.result.currencyName
						this.signinConfig.signInName = res.result.signInName
						this.signinConfig.taskName = res.result.taskName
						this.signinConfig.taskIcon = res.result.taskIcon
						this.signinConfig.signInIcon = res.result.signInIcon
					}

				})
			},
			//签到
			signin() {
				this.$request('signin.signin', {
					sysOrgCode: uni.getStorageSync('sysOrgCode'),
					memberId: uni.getStorageSync('id'),
					signInId: this.signinId,
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '签到成功'
						});
						this.getSigninList()
						this.getMyGoldCoins()
					}

				})
			},
			//我的金币
			getMyGoldCoins() {
				this.$request('signin.signinGoidConins', {
					sysOrgCode: uni.getStorageSync('sysOrgCode'),
					memberId: uni.getStorageSync('id')
				}).then(res => {
					if (res.code == 200) {
						this.userinfo.nums = res.result.totalPrice
						this.userinfo.exchange = res.result.exchange
						this.userinfo.exchangeRatio = res.result.exchangeRatio

					}

				})
			},
			//签到列表
			getSigninList() {
				// this.datas = []
				this.$request('signin.signinList', {
					sysOrgCode: uni.getStorageSync('sysOrgCode'),
					memberId: uni.getStorageSync('id'),
				}).then(res => {
					if (res.code == 200) {
						this.receiveStatus = res.result.receiveStatus
						this.signinId = res.result.signInId
						this.currencyQuantity = res.result.today
						this.sumcurrencyQuantity = res.result.total

						this.datas = res.result.list
					}

				})
			},
			//任务
			handleToTask(id, key) {
				switch (key) {
					case 'ad': {
						uni.setStorageSync('taskId', id)
						uni.setStorageSync('taskKey', key)
						this.showRewardVideoAd()
						break
					}
					case 'like': {
						uni.switchTab({
							url: '/pages/home/index?t=' + Date.now()
						})
						break
					}
					case 'bw': {
						uni.switchTab({
							url: '/pages/home/index'
						})
						break
					}
					case 'sy': {
						this.getHomePageExample()
						break;
					}
				}
			},
			//获取闪游盒子链接地址
			getHomePageExample() {
				// this.questList = []
				this.$request('signin.getHomePageExample', {
					sysOrgCode: uni.getStorageSync('sysOrgCode'),
					memberId: uni.getStorageSync('id'),
				}).then(res => {
					console.log("获取闪游盒子链接地址", res);
					if (res.code == 200) {
						const h5Url = res.result
						uni.navigateTo({
							url: '/pages/home/bonus/webview?url=' + encodeURIComponent(h5Url) // 跳转到 WebView 页面并传递 URL
						});
					}
				})
			},
			//任务列表
			getSigninTaskList() {
				this.questList = []
				this.$request('signin.signinTaskList', {
					sysOrgCode: uni.getStorageSync('sysOrgCode'),
					memberId: uni.getStorageSync('id'),
					owningPlatform: 1
				}).then(res => {
					if (res.code == 200) {
						this.questList = res.result
					}

				})
			},
			//任务完成
			signinTaskSuccess(id, key) {
				this.$request('signin.signinTaskSuccess', {
					sysOrgCode: uni.getStorageSync('sysOrgCode'),
					memberId: uni.getStorageSync('id'),
					taskKey: key,
					signInId: id
				}).then(res => {
					console.log("任务完成", res);
					if (res.code == 200) {
						this.getMyGoldCoins()
						this.getSigninTaskList()
					}

				})
			},
			goDetails() { // 示例参数值
				// 跳转至详情页面，并携带参数
				uni.navigateTo({
					url: `/pages/home/bonus/infos/infos` // 使用 query 参数传递数据
				});
			},
			advertisement() {
				// 在页面onLoad回调事件中创建激励视频广告实例
				if (wx.createRewardedVideoAd) {
					videoAd = wx.createRewardedVideoAd({
						// adUnitId: 'adunit-ea3b7e6acf884135' //小程序激励视频id
						adUnitId: apiMoen.adId //小程序激励视频id  盼盼
					})
					console.log('videoAd', videoAd)
					// 激励视频广告加载成功时
					videoAd.onLoad(() => {})
					// 激励视频广告加载失败时
					videoAd.onError((err) => {
						console.error('激励视频光告加载失败', err)
					})
					// 激励视频广告关闭时
					videoAd.onClose((res) => {
						if (res.isEnded) {
							//成功
							const id = uni.getStorageSync('taskId')
							const key = uni.getStorageSync('taskKey')
							this.signinTaskSuccess(id, key)
						} else {
							//失败
							console.log('广告没有看完')
						}

					})
				}
			},
			showRewardVideoAd() {
				if (videoAd) {
					videoAd.show().then((res) => {
						console.log('激励视频广告显示')
					}).catch((err) => {
						console.error(err)
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	@import 'bonus.scss';
</style>